<template>
  <el-dialog v-bind="$attrs" :visible.sync="visible">
    <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px">
      <el-form-item label="退款原因" prop="select" class="d-ib mr-20">
        <RefundReasonCascader class="w-300" v-model="form.select" ref="RefundReasonCascader"></RefundReasonCascader>
      </el-form-item>
      <el-form-item label="手机号码" class="d-ib">
        <el-input class="w-300" placeholder="请输入手机号码" v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="详细原因">
        <el-input type="textarea" v-model="form.reason" :rows="5" placeholder="请输入详细原因"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="onCofirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { staffForward } from '@/api/workorder'

export default {
  props: {
    orderId: {
      type: String
    },
    ruleForm: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      visible: false,
      form: {
        select: [],
        phone: '',
        reason: '',
      },
      rules: {
        select: [
          { required: true, message: "请选择退款原因", trigger: "change" },
        ],
      }
    };
  },
  methods: {
    show({order} = {}) {
      this.form.reason = '';
      this.form.phone = order.bookerPhone;
      this.form.select = [];
      this.visible = true;
    },
    onCofirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const selectedLabels = this.$refs.RefundReasonCascader.getVm().selectedLabels
          const reason = (selectedLabels && selectedLabels.length ? `【退款原因：${selectedLabels.join('；')}】` : '') +
                          (this.form.phone ? `【电话号码：${this.form.phone}】` : '') + 
                          (this.form.reason ? `【详细原因：${this.form.reason}】` : '')
          const param = {
            orderId: this.orderId,
            forwardReason: reason,
            isForward: 1, // 确认转接
          };
          staffForward(param).then(res => {
            if (res.data.code == 200) {
              this.visible = false;
              this.confirmDialog({ msg: `转接成功！后台单号：${this.ruleForm.xmbzNo}` });
            }
            else {
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          });
        }
      })
    },
    // 提交后提示单号弹窗
    confirmDialog({ msg }) {
      this.$confirm(msg, '提示', {
        showCancelButton: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        window.close();
      }).catch(() => {
      });
    },
  },
}
</script>

<style lang="scss" scoped></style>
